<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>贝达教育</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../src/iconfont/iconfont.css">
<style>
	#banner{
		margin-top: 44px; 
	}
	.scrollteacher {
		overflow-x: auto;
		overflow-Y: hidden;
	}
	.scrollteacher ul{
		
		margin: 0.2rem 0;
	}
	.scrollteacher ul li{
		width: 115px;
		height:80px;
		text-align: center;
		margin-right: 5px;
		float: left;
	}
	.IndTit{
		margin-top: 0.2rem;
	}
	.IndOneE span{
		padding-top:2px;
		padding-bottom:2px;
	}
	.lastInd{
		padding-top:3px;
	}
	.mui-media-object{
		height:70px!important;
	}
	.header {
		text-align: center;
		font-size: 18px;
	}
	.heand_left {
		position: absolute;
		left: 0;
		padding-left: 0;
	}
	.InWqhgP {
				margin-bottom: 0.2rem;
			}
			
			.video {
				margin: 0.2rem 0;
			}
			
			.video img {
				width: 100%;
			}
			
			.mui-scroll li {
				float: left;
			}
			
			.playbtn img {
				position: absolute;
				width: 1rem;
				left: 50%;
				top: 50%;
				margin-top: -0.5rem;
				margin-left: -0.5rem;
			}
			
			.scrollteacher {
				overflow-x: auto;
				text-align: center;
				overflow-y: hidden;
			}
			
			.scrollteacher ul {
				margin: 0.2rem 0;
			}
			
			.scrollteacher ul li {
				width: 115px;
				height: 80px;
				text-align: center;
				margin-right: 5px;
			}
			
			.IndTit {
				margin-top: 0.2rem;
			}
			
			.ShopHePic .mui-media-object {
				width: 1.65rem;
				height: 70px;
			}
			
			.IndOneE span {
				padding-top: 3px;
				padding-bottom: 2px;
			}
			
			.otherIndOneP {
				margin-top: 0.1rem;
			}
			
			.shopBoxa {
				width: 100%;
				position: absolute;
				top: 10px;
				padding-left: 110px;
				height: 75px;
			}
			
			.sendinfo {
				margin-top: 15px;
				margin-left: 10px;
				font-size: 14px;
				color: #7b7b7b;
				width: 4.7rem;
			}
			
			.ShopANrs {
				font-size: 14px;
				padding-right: 10px;
			}
			
			.sendinfos {
				position: absolute;
				bottom: 0px;
			}
			
			.ShopA {
				padding-bottom: 0px;
			}
			
			.bordera {
				/* border-bottom: dashed #eee 1px; */
				border-radius: 10px;
				box-shadow: 0px 4px 20px 0px rgba(220, 220, 220, 0.41);
				margin-bottom: 15px;
				padding: 10px;
				position: relative;
			}
			
			.sendname {
				font-size: 12px;
			}
			
			.ClassT {
				border-bottom: 0px;
			}
			
			.ClassTo i {
				background: #FECF0E;
			}
			
			.ClassTa i {
				/* background-color: #FECF0E; */
				height: 5px;
				border-radius: 100px;
			}
			
			.MP60 {
				margin-top: 20px;
				padding-top: 0px;
			}
			
			.ShopHePic {
				height: 80px;
				width: 80px;
			}
			
			.ShopHePic img {
				height: 60px;
				width: 60px;
			}
			
			.ShopHear {
				padding: 10px;
				margin-top: 50px;
				border-radius: 10px;
			}
			
			.ShopHear .headerImg {
				border-radius: 10px;
				box-shadow: 0px 6px 11px 0px rgba(140, 140, 140, 0.41);
				position: relative;
			}
			
			.ShopHeN {
				position: absolute;
				top: 0px;
			}
			
			.newShopImg {
				width: 80px;
				height: 80px;
				position: absolute;
				top: 20px;
				left: 20px;
			}
			
			.newShopImg img {
				width: 80px;
				height: 80px;
				border-radius: 10px;
			}
			
			.newShopInfo {
				width: 100%;
				padding-left: 100px;
				position: absolute;
				top: 0px;
			}
			
			.ShopHeNt {
				top: 15px;
				position: absolute;
				font-size: 18px;
				font-weight: bold;
			}
			
			.IndOneE {
				top: 40px;
			}
			
			.IndOneE span {
				color: #ffffff;
			}
			
			.ShopTK {
				padding-top: 0px;
			}
			
			.newHeaderBg {
				background-image: url('../../images/ShopT.jpg');
				height: 100px;
				border-radius: 10px;
				overflow: hidden;
				background-repeat: no-repeat;
				background-size: 100%;
				box-shadow: 0px 10px 16px 0px #cccccc;
			}
			
			.header {
				text-align: center;
				font-size: 18px;
			}
			
			.heand_left {
				position: absolute;
				left: 0;
				padding-left: 0;
			}
			
			.heand_right {
				position: absolute;
				right: 0;
				top: 0;
			}
			.videoWidth{
				width: 100%;
			}
</style>
</head>
<body>
<div id="Classes" class="dk">   
	
    <!--head-开始-->
    <div class="header" style="text-align: center;">
    	<div class="mui-back mui-action-back mui-icon mui-icon-left-nav mui-pull-left heand_left"><img src="../../images/icon/Back_j.png"></div>
        <span>课程详情</span>
      <div class="clear"></div>
    </div>
    <!--head-结束-->
     
    <!--banner-开始-->
    <div  id="banner">       
        <div class="swiper-container">
					<div class="swiper-wrapper">
					  
					</div>
					<div class="pagination"></div>
		</div>
    </div>
    <!--banner-结束-->
    
    <!--腰线-开始-->
    <div class="ClaTK">
        <div class="ClaTKt">{{item.name}}</div>
        <div class="ClaTKs">{{item.year}}丨{{item.hour}}</div>
        
    </div>
   <div class="ShopTK">
		<div class="ClassT" id="mynav" style="height: 45px;">
			<a href="#ShopZ1" class="ClassTa ClassTo fl">课程介绍<i></i></a>
			<a href="#ShopZ2" class="ClassTa fl">图文详情<i></i></a>
			<a href="#ShopZ3" class="ClassTa fl">相关推荐<i></i></a>
		</div>
	</div>
    <!--腰线-开始-->
    
    <!--课程介绍-开始-->
    <div id="ClassZ1" class="MP60">
        <div class="IndOne">    
            <div class="IndTit">课程简介</div>        
            <div class="ClasJJ">{{item.count}}</div>
            <div class="read ClasJJA" @tap="handleFold(event)" v-if="conlength>75">阅读全文</div>  
            <div class="IndTit">师资介绍</div>
    	<div class="scrollteacher">
    		<ul>
    			<li v-for="(teacher,index) in item.teacher">
                    	 <div class="mui-media-objectb" @tap="previewimg(item.teacher,index)" :style="{backgroundImage:'url(' + teacher.member_avatar + ')'}"></div>
                         <p>{{teacher.member_name}}</p><span>{{teacher.member_school}}</span>
                </li>
    		</ul>
    		
    	</div>
            
            <div class="IndTit">教学特色</div> 
            
            <div class="ClasJX"><img @tap="previewimg(item.jiao,0)" :src="item.jiao" width="100%" /></div>
    
        </div>
    </div>
    <!--课程介绍-结束-->
    
    <!--图文详情-开始-->
    <div id="ClassZ2" class="MP60">
        <div class="IndOne">        
            <!--<div class="IndTit">图文详情</div>-->            
            <div class="ClasPic">
                <img @tap="previewimg(item.tu,0)" :src="item.tu" width="100%"  style="min-height: 300px;"/>
               
            </div>    
        </div>
    </div>
    <!--图文详情-结束-->
    
    <!--相关推荐-开始-->
    <div class="IndOne MP60" id="ShopZ3">
						<a @tap="open_detail(ad)" class="ShopA  bordera" v-for="institution in item.institution" @tap="opendetail(institution)">
							<div class="ShopAPic">
								<img :src="institution.institution_avatar" style="width:100px;border-radius: 5px;min-height:70px;" alt="">
							</div>
							<div class=" shopBoxa">
								<div class="ShopANrs">{{institution.institution_name}}</div>
								<div class="IndOneC">
										<div class="IndOnSty fl">
											<!-- <img src="../../images/star.png" class="fl" v-for="(star,index) in 5" v-if="index<=item.comment-1" /> -->
											<span class="iconfont icon-favorfill" style="color: #FECF0E;" v-for="(star,index) in 5" v-if="index<=institution.comment-1"></span>
											<span>{{institution.comment}}分</span>
										</div>
										<div class="IndOneM fr">
											<!--span class="IndOeye">{{itema.views}}</span--><span class="fr"></span></div>
										<div class="clear"></div>
									</div>
								
								<div class="sendinfos">
									<div class=""><span class="sendname">{{institution.views}}</span></div>
									<!-- <div class="fr"><span>{{ad.catime}}</span></div> -->
								</div>
							</div>
						</a>
					</div>
   
    <!--相关推荐-结束--> 
</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../js/idangerous.swiper.min.js"></script>
<script src="../../js/mui.js"></script>
<script src="../../js/app.js"></script>
<script src="../../js/token.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/navfix.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
		$('#mynav').navfix(0,999);    
	});
</script> 
<script>
	
jQuery(document).ready(function($) { 
	//育儿课程
	$('.ClassTa').click(function(){		
		if(!$(this).hasClass('ClassTo')){
			$('.ClassTa').removeClass('ClassTo');
			$(this).addClass('ClassTo');
		}
	})
})
window.onscroll = function(){
 	  var menuChilda=document.getElementById('mynav').getElementsByTagName('a');
 	  var contentChild=$('.MP60');
 	  var windowheight=$(this).height();
 	  var scrollHeight = $(document).height();
      var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;   
      for(var i=0;i<menuChilda.length;i++){  
        if(scrollTop + menuChilda[0].offsetHeight >= contentChild[i].offsetTop){  
            for(var j=0;j<menuChilda.length;j++){  
                $('#mynav a').removeClass('ClassTo');
            }  
            $('#mynav a').eq(i).addClass('ClassTo');
       }else if(scrollTop+windowheight==scrollHeight){
	 		$('#mynav a').removeClass('ClassTo');
			$('#mynav a').last().addClass('ClassTo');
		} 
    }  
  };
</script>
<script type="text/javascript">
			mui.init(); 
			var uid="";
			var scheduleid=''
			var favoritestatus = 0; //关注按钮状态，避免快速点击
			var state=''
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();  
				state = app.getState();
				memberToken = state.memberToken
				uid = state.userid;
				scheduleid = self.scheduleid;
				var paradata = {
					uid: uid,
				    id:scheduleid,
				    memberToken:memberToken
				};
				mui.post(Apiurl+'index/schedule_info', paradata, function(data) {
					Classes.item = data;
					Classes.conlength = data.count.toString().length
					console.log(JSON.stringify(data))
					$('.scrollteacher ul').width(120*data.teacher.length)
				}, 'json');
				mui.post(Apiurl+'index/schedule_banner', paradata, function(data) {
					var bannerHtml = '';
					for(var i = 0; i < data.length; i++) { 
						bannerHtml += "<div class=\"swiper-slide\"><img src='" + data[i] + "'></div>";
					}
					$(".swiper-wrapper").html(bannerHtml);
  					
					var mySwiper = new Swiper('.swiper-container', {
						loop: true,
						pagination: '.pagination',
						paginationClickable: true,
						moveStartThreshold: 100,
						centeredSlides: true,
						autoplay: 3500,
						autoplayDisableOnInteraction: false
					})

				}, 'json');
			});
			
			var Classes = new Vue({
				el: '#Classes',
				data: {
					item: [],
					bannersa: [],
					conlength:''
				},
				methods:{
					handleFold: function(e) {
						if(e.target.previousElementSibling.getAttribute('class') == 'ClasJJ') { 
							e.target.previousElementSibling.setAttribute('class', 'ClasJ6');
							e.target.innerHTML='收起';
						} else {
							e.target.previousElementSibling.setAttribute('class', 'ClasJJ');
							e.target.innerHTML='阅读全文';
						}

					},
					opendetail: function(institution){
						mui.openWindow({
							url: 'Class.html', 
							id: 'schoolsdetail',
							extras: {
								scheduleid: institution.institution_id
							},
							createNew:true,
						});
					},
					//小秘书
					services: function(){
						mui.openWindowWithTitle({
							url: '../services/index.html',
							id: 'servicesa',
							preload: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": { //详情页原生导航配置
									backgroundColor: '#fff', //导航栏背景色
									titleText: '小秘书', //导航栏标题
									titleColor: '#000', //文字颜色
									autoBackButton: true, //自动绘制返回箭头
									splitLine: { //底部分割线
										color: '#dfdfdf'
									}
								}
							}, 
							waiting: {
								autoShow: true
							}
						});
					},
				
					//图片预览
					previewimg: function(item, index) {
						var urls = [];
						if(typeof(item)=='string'){
							item=item.split(',')
						}
						item.forEach(function(img) {
							if(img.member_avatar){
								urls.push(img.member_avatar);
							}else{
								urls.push(img); 
							}
						}); 
						
						plus.nativeUI.previewImage(urls, {
							current: index,
							loop: true,
							indicator: 'number'
						});
					},
					
				}
			});	
	//处理返回键
			var backButtonPress = 0;
			var old_back = mui.back;
			mui.back = function(event) {
				var ws=plus.webview.currentWebview()
				var adWebview = plus.webview.getWebviewById('ad_detail'); 
				if(adWebview) {
					adWebview.close();
				}else if(ws) {
					ws.close() 
				}else {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				}
			};

</script>


</html>
